<template>
  <view class="settings-container" :class="{'dark-theme': isDarkMode}">
    <uni-card :is-shadow="true" class="setting-card">
      <!-- 字体大小设置 -->
      <uni-list-item direction="column">
        <template v-slot:header>
          <view class="setting-header">
            <uni-icons type="font" size="20" color="#2ac2d1"></uni-icons>
            <text class="title">字体大小</text>
            <text class="value">{{ fontSize }}px</text>
          </view>
        </template>
        <uni-slider 
          v-model="fontSize" 
          :min="12" 
          :max="24" 
          block-size="16"
          :block-color="themeColor"
          activeColor="#2ac2d1"
          @change="onFontSizeChange"
        />
      </uni-list-item>

      <!-- 主题模式 -->
      <uni-list-item @click="toggleTheme" :border="false">
        <template v-slot:header>
          <view class="setting-header">
            <uni-icons :type="isDarkMode ? 'moon' : 'sun'" size="20" :color="themeColor"></uni-icons>
            <text class="title">主题模式</text>
          </view>
        </template>
        <template v-slot:footer>
          <uni-switch 
            v-model="isDarkMode" 
            :color="themeColor"
            @change="onThemeModeChange"
          />
        </template>
      </uni-list-item>

      <!-- 缓存清理 -->
      <uni-list-item @click="showCleanDialog" :border="false">
        <template v-slot:header>
          <view class="setting-header">
            <uni-icons type="trash" size="20" color="#2ac2d1"></uni-icons>
            <text class="title">缓存清理</text>
            <text class="cache-size">{{ cacheSize }}</text>
          </view>
        </template>
        <template v-slot:footer>
          <uni-icons type="right" color="#999"></uni-icons>
        </template>
      </uni-list-item>

      <!-- 语音播报 -->
      <uni-list-item :border="false">
        <template v-slot:header>
          <view class="setting-header">
            <uni-icons type="sound" size="20" :color="themeColor"></uni-icons>
            <text class="title">语音播报</text>
          </view>
        </template>
        <template v-slot:footer>
          <uni-switch 
            v-model="isVoiceBroadcastOn" 
            :color="themeColor"
            @change="onVoiceBroadcastChange"
          />
        </template>
      </uni-list-item>
    </uni-card>

    <!-- 清理确认弹窗 -->
    <uni-popup ref="cleanPopup" type="dialog">
      <uni-popup-dialog 
        type="info"
        title="确认清理"
        :content="`当前缓存 ${cacheSize}，确定清理吗？`"
        @confirm="clearCache"
      />
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fontSize: 16,
      isDarkMode: false,
      isVoiceBroadcastOn: false,
      cacheSize: '0.0MB',
      themeColor: '#2ac2d1'
    };
  },
  methods: {
    onFontSizeChange(e) {
      uni.setStorageSync('fontSize', this.fontSize);
      uni.$emit('fontSizeChanged', this.fontSize);
      this.showToast(`字体大小已调整为 ${this.fontSize}px`);
    },
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      uni.setStorageSync('themeMode', this.isDarkMode);
      this.updateTheme();
    },
    async updateTheme() {
      await this.$nextTick();
      this.themeColor = this.isDarkMode ? '#3a3a3a' : '#2ac2d1';
    },
    showCleanDialog() {
      this.$refs.cleanPopup.open();
    },
    async clearCache() {
      uni.showLoading({ title: '清理中...', mask: true });
      await new Promise(resolve => setTimeout(resolve, 1500));
      uni.clearStorageSync();
      this.cacheSize = '0.0MB';
      uni.hideLoading();
      this.showToast('缓存清理完成', 'success');
    },
    onVoiceBroadcastChange(e) {
      uni.setStorageSync('voiceBroadcast', this.isVoiceBroadcastOn);
      this.showToast(`语音播报已${this.isVoiceBroadcastOn ? '开启' : '关闭'}`);
    },
    showToast(title, icon = 'none') {
      uni.showToast({ title, icon });
    },
    async getCacheSize() {
      const { size } = await uni.getStorageInfo();
      this.cacheSize = (size / 1024).toFixed(1) + 'MB';
    }
  },
  mounted() {
    this.getCacheSize();
    const savedFontSize = uni.getStorageSync('fontSize');
    if (savedFontSize) this.fontSize = savedFontSize;
    this.isDarkMode = uni.getStorageSync('themeMode') || false;
    this.updateTheme();
  }
};
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  padding: 30rpx;
  background: #f8f9fa;
  transition: background 0.3s ease;

  &.dark-theme {
    background: #1a1a1a;
    
    .setting-card {
      background: #2d2d2d;
      
      .title, .value {
        color: #e0e0e0;
      }
      
      .cache-size {
        color: #888;
      }
    }
  }
}

.setting-card {
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.05);
}

.setting-header {
  display: flex;
  align-items: center;
  width: 100%;
  
  .uni-icons {
    margin-right: 16rpx;
  }
  
  .title {
    flex: 1;
    font-size: 30rpx;
    color: #333;
  }
  
  .value {
    font-size: 28rpx;
    color: #666;
    margin-left: 20rpx;
  }
  
  .cache-size {
    font-size: 26rpx;
    color: #999;
  }
}

:deep(.uni-slider-handle) {
  box-shadow: 0 4rpx 12rpx rgba(42, 194, 209, 0.3);
}

:deep(.uni-switch) {
  transform: scale(0.9);
}
</style>